Developing Applications for Windows Phone 7 : Creating a New Project

Visual Studio

When you install the development tools for Windows Phone 7 you get an express edition of Microsoft Visual Studio 2010 (or Visual Studio) that is used to create Windows Phone 7 applications only. When you launch this express edition of Visual Studio, you will see the main window of the applications as shown in Figure 1.

Figure 1. Microsoft Visual Studio 2010 Express for Windows Phone (VSExpress.bmp)

By clicking the “New Project” icon on the start page of Visual Studio, you will be prompted to start a new project. This express edition of Visual Studio only supports creating applications for the Window Phone 7 and only with C#. When looking at the New Project dialog (Figure 2) you will notice that only Silverlight and XNA project templates are shown. For this first project we will start with a new “Windows Phone Application” template and name it “HelloWorldPhone”.

Figure 2. New Project Dialog (NewProject.bmp)

Once Visual Studio creates the new project you can take a quick tour of the Visual Studio user interface as shown in Figure 3). By default, Visual Studio shows three main panes for you to create your application with. The first pane (labeled #1) is the Toolbox. The Toolbox contains a list of available controls for your project. You can drag and drop controls from the Toolbox directly onto the phone surface as you create your application. The second pane (labeled #2) is the main editor surface for your application. In this pane, every edited file will appear separated with tabs as shown. By default the MainPage.xaml file is shown when you create a new Windows Phone 7 application. This is the main design document for your new application. Finally, the last pane (labeled #3) contains a display of the contents of the new project.

Figure 3. The Visual Studio User Interface (VSTour.bmp)

Before we look at how to create the application into something actually useful, let’s see the application working in the device. You will notice that in the toolbar (not the Toolbox) of Visual Studio there is a bar for debugging. On that toolbar is a drop-down box for specifying what to do to debug your application. This drop-down should already show “Windows Phone 7 Emulator” as that is the default when the tools are installed (as shown in Figure 4).

Figure 4. Using the Emulator (EnablingTheEmulator.bmp)

At this point if you press the F5 key (or the triangular play button on the debugging toolbar), Visual Studio will build the application and start up the emulator with our new application as shown in Figure 5.

While developing applications for the Windows Phone 7, this emulator will be the primary way you will debug your applications. Our application does not do anything so you can go back to Visual Studio and hit the square stop button the debug toolbar (or press Shift-F5) to end your debugging session.

The Emulator can be kept open as it will be re-used for multiple debugging sessions. Closing it between debugging sessions is not only unnecessary but will slow down your development.

XAML

In Silverlight, the development is really split between the design and the code. The design is accomplished using a markup language called XAML (rhymes with camel). XAML (or eXtensible Application Markup Language) and is an XML based language for representing the look and the feel of your application. Since XAML is XML based, the design is made of a hierarchy of elements that describe the design. At its most basic level, XAML represents objects that describe the look and feel of an application. These objects are represented by XML elements like so:

<Rectangle />

<!-- or -->

<TextBox />

XML Elements are then modified by setting attributes to change the objects:

<Rectangle Fill="Blue" />

<!-- or -->

<TextBox Text="Hello World" />

Containers in XAML use XML nesting to imply ownership:

<Grid>
  <Rectangle Fill="Blue" />
  <TextBox Text="Hello World" />
</Grid>

Using this simple XML-based syntax you can create complex, user-driven designs for your phone applications. With this knowledge in hand, we can make subtle changes to the XAML supplied to us from the template. We could modify the XAML directly, but instead you can start by using the Visual Studio designer for the phone. In the main editor pane of Visual Studio the MainPage.xaml file is split between the designer and the text editor for the XAML. The left pane of the MainPage.xaml file is not just a preview but a fully usable editor. For example, click on the ‘page name’ in the designer, it will select that element in the XAML as shown in Figure 6.

Once you have that element selected in the designer, the properties for the element are shown in Property window (that shows up below the Solution Explorer). If the window is not visibile, you can enable it in the View menu by selecting “Properties Window” or by hitting the F4 key. This window is shown in Figure 7.

Figure 7. Location of the Properties Window (PropertiesWindow.bmp)

The Properties Window contains a number of different pieces of information as shown in Figure 8.

The Properties Window is made up of a number of small parts. The section near the top (labeled #1) shows the type of object you have selected (e.g. “TextBlock”) and name, if any (e.g. “PageTitle”). This should help you be sure you have selected the right object to edit its properties. The next section down (labeled #2) contains a search bar to do a name search of the properties as well as buttons for sorting and grouping the properties. Finally the third section (labeled #3) is a list of the properties that you can edit.

The Properties Window can also be used to edit events, but that will be covered in an upcoming chapter of the book.

With the Properties Window shown, you can change properties of the selected item by using the items in the window. For example, to change the text that is in the TextBlock, you can simply type in a new value for the “Text” property. If you type in “hello world” in the Text property and hit return, you will see that the designer is now changed to have the new value. Changing this property actually changes the XAML in the MainPage.xaml file. The designer is simply reacting to the change in the XAML. If you look at the XAML the change has been affected there as well as shown in Figure 9.

Figure 9. The Changed Property (ChangedProperty.bmp)

You can edit the XAML directly as well if you prefer. If you click on the TextBlock above the “PageTitle” (the one labeled “ApplicationTitle”), you can edit the Text attribute directly and change it. Try changing it to “MY FIRST WP7 APP” to see how it affects the designer and Property Window:

...
<TextBlock x:Name="ApplicationTitle"
           Text="MY FIRST WP7 APP"
           Style="{StaticResource PhoneTextNormalStyle}" />
...

Depending on your comfort level, some developers will find it easier to use the Property Window; while others will be more comfortable editing the XAML directly. There is no wrong way to do this.

With the Visual Studio XAML designer can create interesting designs, but the real powerhouse of a tool for designers and developers is the Expression Blend product. Let’s take our design and edit it into something useful for our users using Blend.